<template>
  <div class="rank">
    <ScrollViewVue ref="scrollView">
      <ul>
        <li v-for="(value, index) in category.titles" :key="index">
          <h3 class="group-title">{{ value }}-{{index}}</h3>
          <!-- 两种布局用标题名去做条件渲染谁 -->
          <ul class="normal-group" v-if="value === '官方榜'">
            <li v-for="obj in category[index]" :key="obj.rank.id" @click="$router.push(`/rank/detail/${obj.rank.id}/rank`)">
              <div class="rank-left">
                <img v-lazy="obj.rank.coverImgUrl" alt="" />
                <p>{{ obj.rank.updateFrequency }}</p>
              </div>
              <div class="rank-right">
                <p v-for="(item, index) in obj.rank.tracks" :key="index">
                  {{ index + 1 }}.{{ item.first }} - <em>{{ item.second }}</em>
                </p>
              </div>
            </li>
          </ul>
          <!-- <ul class="other-group" v-else>
            <li v-for="obj in category[index]" :key="obj.rank.id">
              <div class="rank-top">
                <img v-lazy="obj.rank.coverImgUrl" alt="" />
                <p>{{ obj.rank.updateFrequency }}</p>
              </div>
              <div class="rank-bottom"></div>
            </li>
          </ul> -->
        </li>
      </ul>
    </ScrollViewVue>
    <transition>
    <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import { getToplistDetail } from "../api/index";
import ScrollViewVue from "../components/ScrollView.vue";
export default {
  name: "Rank",
  data() {
    return {
      category: [],
    };
  },
  async created() {
    let res = await getToplistDetail();
    // console.log(res);
    this.category = res;
    // this.category.forEach((item,index) => {
    //    console.log(item,'0000');
    // })
  },
  watch: {},
  components: {
    ScrollViewVue,
  },
};
</script>
<style scoped lang="scss">
@import "../assets/css/variable.scss";
@import "../assets/css/mixin.scss";
.rank {
  position: absolute;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
  // background: #f00;
  @include bg_sub_color();
  overflow: hidden;
  .group-title {
    padding: 10px 20px;
    @include font_color();
    @include font_size($font_large);
    font-weight: bold;
  }
  .normal-group {
    li {
      width: 700px;
      height: 250px;
      display: flex;
      // justify-content: center;
      align-items: center;
      background: #f7e0e8;
      border-radius: 30px;
      margin: 20px auto;
      &:nth-of-type(2) {
        background: #dfebe9;
      }
      &:nth-of-type(3) {
        background: #f5dfdf;
      }
      &:nth-of-type(4) {
        background: #f5e8dd;
      }
      .rank-left {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 200px;
          height: 200px;
          border-radius: 10px;
          margin: 0 20px;
        }
        p {
          position: absolute;
          left: 30px;
          bottom: 10px;
          color: #fff;
          @include font_size($font_medium_s);
        }
      }
      .rank-right {
        p {
          @include clamp(1);
          // @include font_color();
          color: #666;
          @include font_size($font_medium_s);
          margin: 10px 0;
        }
      }
    }
  }
  .other-group {
    li {
      width: 700px;
      // height: 250px;
      display: flex;
      // justify-content: center;
      align-items: center;
      border-radius: 30px;
      margin: 20px auto;
      .rank-top {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 200px;
          height: 200px;
          border-radius: 10px;
          margin: 0 20px;
        }
        p {
          position: absolute;
          left: 30px;
          bottom: 10px;
          color: #fff;
          @include font_size($font_medium_s);
        }
      }
      .rank-bottom {
      }
    }
  }
}
.v-enter {
  transform: translateX(100%);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: transform 1s;
}
.v-leave {
  transform: translateX(0);
}
.v-leave-to {
  transform: translateX(100%);
}
.v-leave-active {
  transition: transform 1s;
}
</style>
